<template name="FilesMenuItem">
  {{#if currentUser.isAdmin}}
    <li class="{{#if inRouter 'files'}}active{{/if}}">
      <a href="/files"><i class="fa fa-files-o"></i> <span>{{_ 'app_files'}}</span></a>
    </li>
  {{/if}}
</template>

<template name="Files">
  {{#contentFor "menu"}}
    <p class="navbar-text pull-left menu-title">
      {{_ 'app_files'}} ({{count 'files'}})
    </p>
  {{/contentFor}}

  {{#Layout template="InboxLayout"}}
    <ul class="list-group threads files">
      {{#unless files.count}}
        <li class="list-group-item thread text-muted">{{_ 'app_no_record'}}</li>
      {{/unless}}
      {{#each files}}
        <li class="list-group-item thread" data-user-id="{{userId}}">{{> FileItem}}</li>
      {{/each}}
      {{#if ready}}
        {{#if nextPath}}
          <a href="{{nextPath}}" class="list-group-item text-center text-muted thread small">
            {{_ "paginate_load_more"}}
          </a>
        {{/if}}
      {{else}}
        <span class="list-group-item text-center text-muted thread small"><i class="fa fa-spinner fa-spin"></i></span>
      {{/if}}
    </ul>
  {{/Layout}}
</template>

<template name="FileViewLink">
  {{#if compare (filetype type) '===' 'image'}}
    {{#if isGif}}
      <a href="{{fileURL this}}" data-fancybox='thread' data-caption="{{name}}" class="action text-muted">
        <i class="fa fa-eye"></i> {{_ 'app_action_view'}}
      </a>
    {{else}}
      <a href="{{fileURL this 'preview'}}" data-fancybox='thread' data-caption="{{name}}" class="action text-muted">
        <i class="fa fa-eye"></i> {{_ 'app_action_view'}}
      </a>
    {{/if}}
  {{/if}}
  {{#if compare (filetype type) '===' 'video'}}
    <a href="{{fileURL this}}?play=true" data-fancybox='thread' data-caption="{{name}}" class="action text-muted">
      <i class="fa fa-eye"></i> {{_ 'app_action_view'}}
    </a>
  {{/if}}
  {{#if compare (filetype type) '===' 'audio'}}
    <div style="display: none;" id="content-{{_id}}">
      <audio controls loop>
        <source src="{{fileURL this}}?play=true" type={{type}}>
      </audio>
    </div>
    <a href="#" data-fancybox='thread' data-src="#content-{{_id}}" data-caption="{{name}}" class="action text-muted">
      <i class="fa fa-eye"></i> {{_ 'app_action_view'}}
    </a>
  {{/if}}
  {{#if compare (filetype type) '===' 'text'}}
    <a href="#" data-fancybox='thread' data-type="iframe" data-src="{{fileURL this}}" data-caption="{{name}}" class="action text-muted">
      <i class="fa fa-eye"></i>{{_ 'app_action_view'}}
    </a>
  {{/if}}
  {{#if compare (filetype type) '===' 'pdf|odf'}}
    <a href="#" data-fancybox='thread' data-type="iframe" data-src="/ViewerJS/index.html#..{{fileURL this 'original' '/'}}" data-caption="{{name}}" class="action text-muted">
      <i class="fa fa-eye"></i> {{_ 'app_action_view'}}
    </a>
  {{/if}}
  {{#if compare (filetype type) '===' 'word|excel|ppt'}}
    <a href="#" data-fancybox='thread' data-type="iframe" data-src="https://view.officeapps.live.com/op/embed.aspx?src={{fileURL this}}" data-caption="{{name}}" class="action text-muted">
      <i class="fa fa-eye"></i> {{_ 'app_action_view'}}
    </a>
  {{/if}}
</template>

<template name="FileEditNameLink">
  <a href="#" class="btn-edit-file-name action text-muted"><i class="fa fa-pencil"></i> {{_ 'message_action_edit_file_name'}}</a>
</template>

<template name="FileDownloadLink">
  <a href="{{fileURL this 'original'}}?download=true" download="{{name}}" target="_blank" class="action text-muted">
    <i class="fa fa-download"></i> {{_ 'app_action_download'}}
  </a>
</template>

<template name="FileRemoveLink">
  <a href="#" class="btn-remove-file action text-muted"><i class="fa fa-times"></i> {{_ 'app_action_remove'}}</a>
</template>

<template name="FileUploadModal">
  <div class="modal fade modal-rounded">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          <h4 class="modal-title">{{_ 'file_uploading'}} {{file.name}}</h4>
        </div>
        <div class="modal-body">
          {{#with currentUpload}}
          <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
              <span class="sr-only">{{progress.get}}% Complete</span>
            </div>
          </div>
          {{/with}}
        </div>
      </div>
    </div>
  </div>
</template>

<template name="ThreadDetailFiles">
  <div class="panel flat-panel">
    <div class="flat-panel-heading">
      <a data-parent="#thread-details-accordion" href="#thread-files" data-toggle="collapse">
        <div class="flat-panel-title"><i class="fa fa-files-o text-red"></i>{{_ 'files_with_count' count=count}}</div>
      </a>
    </div>
    {{#if files.count}}
      <div id="thread-files" class="flat-panel-body panel-collapse collapse">
        <ul class="files nav nav-pills nav-stacked" id="files-list-{{_id}}" aria-expanded="true">
          {{#each files}}
            <li>{{> FileItem}}</li>
          {{/each}}
        </ul>
      </div>
    {{/if}}
  </div>
</template>

<template name="FileItem">
  {{{fileicon type}}} {{name}}
  <div class="small text-muted">
    {{user.internalName}} ({{filesize size}})
  </div>
  <div class="small text-muted">
    {{formatDayWithTime createdAt}}
  </div>
  <div class="actions pull-right">
    {{> FileViewLink}}
    {{> FileDownloadLink}}
  </div>
</template>
